<template>
  <div>
    <el-dialog title="添加" width="50%" v-model="dialogVisible">
      <el-form ref="baseForm" :model="addForm" >
        <el-form-item :disabled="item.disabled" v-for="item in formData" :label="item.hiddenLabel?'':item.label"  :rules="item.rules">
          <el-input :placeholder="item.placeholder" v-if="item.type=='input'" v-model="addForm[item.value]"  >
          </el-input>
          <el-select v-if="item.type=='select'" v-model="addForm[item.value]" :placeholder="item.placeholder">
                 <el-option v-for="eitem in item.options" :key="item.value" :label="eitem.label" :value="eitem.value">
                  {{eitem.label}}
                 </el-option>
          </el-select>

          <el-upload  action="#" :auto-upload="false" v-if="item.type=='upload'"  :on-change="getFile">
               <el-input v-if="item.hasInput" v-model="addForm[item.value]" disabled></el-input>
                <el-button type="primary">选择视频</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {defineExpose,toRefs,reactive,ref,toRef,defineProps,onMounted,defineEmits} from 'vue'
import type { FormInstance } from 'element-plus';
let props=defineProps<{
    isDialog:Boolean,
    formData:Array<any>,
    formConfig:Object
}>()
let dialogVisible=ref(false) //弹出层

  // 收集的数据
  let addForm=reactive<any>({
     
  })
  // 
  props.formData.forEach(item=>{
      addForm[item.value]=""
  })
  // 生成的表单的数据
let formData=toRef(props,'formData')
let emits=defineEmits(["submit",'upfile'])
// 单独传递上传的数据
let getFile=(file:any)=>{
  console.log(file,"-----------------")
   console.log(file.raw) //file.raw 文件数据包
   let myformdata=new FormData()
   myformdata.append('file',file.raw)
   emits("upfile",myformdata)
   
}

// isDialog 不是弹出层
onMounted(()=>{
  removeDia()
})
let baseForm=ref<FormInstance|null>()
// 点击确定 子传父 v-model收集到的所有数据

let submitForm=()=>{
   baseForm.value?.validate((vali:boolean)=>{
    if(vali){
         emits('submit',addForm)
    }
   })
  //  清空
  // for(let key in addForm){
  //   addForm[key]=""
  // }
}
let resetForm=()=>{
  dialogVisible.value=false;
}
// 子组件的 回显方法
let setFormVal=(row:any)=>{
    console.log(row,"回显数据")
    console.log(addForm,"回显数据1122")
    for(let key in row){
      addForm[key]=row[key]
    }
    dialogVisible.value=true;
}
let close=()=>{
  dialogVisible.value=false;
}
let open=()=>{
  dialogVisible.value=true;
}
defineExpose({
  setFormVal,
  baseForm,
  close,
  open
})

let removeDia=()=>{
  // console.log( baseForm.value,"88888888888888" )
  // let diaOver=document.querySelector('.el-overlay-dialog')
  // let dia=document.querySelector('.el-dialog__body')
  // let myForm1=document.querySelector('.el-form')
  // console.log(myForm1,"----------表单")
  // diaOver.style.display="none"
  // dia.style.display="none"
  // myForm1.style.display="block"
}



</script>